<!doctype html>
<html>

	<head>
		<meta name="keywords" content="甜爱，SweetLove,甜品，甜点，生日蛋糕，冰淇淋，冰品" />
		<meta name="description" content="甜爱网上商城是专注于甜品销售、进口的网站，各种甜品、甜点齐全，还有解暑的各种冰品任顾客挑选，让他们感受到爱的温馨。">
		<meta charset="utf-8">
		<title>欢迎注册！</title>
		<link rel="shortcut icon" href="images/logo_01.png">
		<link rel="stylesheet" href="css/registeryz.css">
		
		<link rel="shortcut icon" href="favicon.ico">	
		<link rel="stylesheet" href="css/iconfont.css">
		<link rel="stylesheet" href="css/global.css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
	</head>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<style type="text/css">
		/*密码强度*/
		
		.pw-strength {
			display: inline-block;
			position: relative;
			clear: both;
			width: 180px;
			height: 30px;
		}
		
		.pw-bar {
			background: url(images/pwd-1.png) no-repeat;
			height: 14px;
			overflow: hidden;
			width: 179px;
		}
		
		.pw-bar-on {
			background: url(images/pwd-2.png) no-repeat;
			width: 0px;
			height: 14px;
			position: absolute;
			top: 1px;
			left: 2px;
			transition: width .5s ease-in;
			-moz-transition: width .5s ease-in;
			-webkit-transition: width .5s ease-in;
			-o-transition: width .5s ease-in;
		}
		
		.pw-weak .pw-defule {
			width: 0px;
		}
		
		.pw-weak .pw-bar-on {
			width: 60px;
		}
		
		.pw-medium .pw-bar-on {
			width: 120px;
		}
		
		.pw-strong .pw-bar-on {
			width: 179px;
		}
		
		.pw-txt {
			padding-top: 2px;
			width: 180px;
			overflow: hidden;
		}
		
		.pw-txt span {
			color: #707070;
			float: left;
			font-size: 12px;
			text-align: center;
			width: 58px;
		}
	</style>

	<body>
		<!--页头-->
		<div id="dingdan"></div>
		<!--页头-->
		<div id="headCon">
			<div>
			
			</div>
			<ul>
				<a href="index.html">
					<li></li>
				</a>
				<span></span>
				<p>用户注册</p>
				<!--<ol>
            <li>
            	<div class="my"><img src="images/shopCar_08.png"></div>
                <p class="red">我的购物车</p>
            </li>
            <li>
            	<div class="order"><img src="images/pay_03.jpg"></div>
                <p>确认订单</p>
            </li>
            <li class="pay">
            	<div class="pay"><img src="images/pay_05.jpg"></div>
                <p>支付</p>
            </li>
            <li class="bingo">
            	<div class="bingo"><img src="images/shopCar_05.png"></div>
                <p>完成</p>
            </li>
        </ol>-->
			</ul>
		</div>
		<!--内容-->
		<div id="contentCon">
			<div class="step-flow-box" style="margin-left: 250px;margin-right: 250px;">
				<div class="step-flow__bd">
					<div class="step-flow__li step-flow__li_done">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">验证身份</p>
					</div>
					<div class="step-flow__line step-flow__li_done">
						<div class="step-flow__process"></div>
					</div>
					<div class="step-flow__li step-flow__li_done">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">绑定新的邮箱</p>
					</div>
					<div class="step-flow__line step-flow__line_ing">
						<div class="step-flow__process"></div>
					</div>
					<div class="step-flow__li">
						<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
						<p class="step-flow__title-top">完成</p>
					</div>
				</div>
			</div>
			<form id="data_" style="height: 500px;">
				<ul style="margin-top: 80px;">
					<p>*姓名：</p>
					<input type="text" id="zsname" name="zsname" placeholder="真实姓名" style="margin-left: 28px;" onfocus="drop_ts(this)" onblur="select_emali(this)"><span></span>
				</ul>
				<ul>
					<p>*身份证：</p>
					<input type="text" placeholder="身份证" id="idcred" name="idcred" style="margin-left: 14px;" oninput="value=value.replace(/[^0-9xX]/,'')" onfocus="drop_ts(this)" onblur="select_idcred(this)" maxlength="18"><span></span>
				</ul>
				<ul>
					<p>*账户名：</p>
					<input type="text" placeholder="账户名 用作登录不可更改" name="account" style="margin-left: 14px;" onfocus="drop_ts(this)" onblur="select_name(this)" maxlength="15"><span></span>
				</ul>

				<ul class="box02">
					<p>*设置密码：</p>
					<input id="paswd" type="password"  name="pawd" placeholder="6~16位字母或数字的组合" onkeyup="z(this)" oninput="paswd_qd(this),value=value.replace(/[\u4e00-\u9fa5]/,'')" onblur="incred_pas(this)" maxlength="16">
					<span></span><br />
					<span id="level_" class="pw-strength" style="margin-left: 120px ;">
							<div class="pw-bar"></div>
							<div class="pw-bar-on"></div>
							<div class="pw-txt">
			                   <span>弱</span>
					           <span>中</span>
					           <span>强</span>
	                    	</div>
		            </span>
		        </ul>
		<ul class="box02" style="margin-top: 0px;">
			<p>*确认密码：</p>
			<input id="paswdjy" type="password" placeholder="请再次输入密码" onfocus="drop_ts(this)" onblur="pas_jy(this)"><span></span>
		</ul>
        <input id="tel" type="hidden" name="tel" /><span style="display: none;"><i class='fa fa-check' aria-hidden='true'></i></span>
		<a onclick="create_user()"style="text-decoration: none;cursor: pointer;border-radius: 5px;">提交资料</a>
		</form>
		</div>
		<!--页脚-->
		<!-- 底部信息 -->
        <div id="dibu"></div>
	</body>

	<script type="text/javascript">
						//顶端导入
		$("#dingdan").load("index_head.html");
	    $("#dibu").load("底部页面.html");
		document.getElementById("tel").value = localStorage.getItem("tel");
		//选择文本消失提示信息
		function drop_ts(z) {
			$(z).next().empty();
			$(z).css("border-color","#4C4C4C");
		}
		//身份证查询
		function select_idcred(z) {
			$(z).next().empty();
			if($(z).val() == "") {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i> 身份证不能为空");
			} else if($(z).val().length != 18) {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i> 身份证格式不对");
			} else {
				var isidcred = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(!isidcred.test($(z).val())) {
					$(z).next().css("color", "red");
					$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i> 身份证格式不对");
				} else if($("#zsname").val() == "") {
					$("#zsname").next().empty();
					$("#zsname").next().css("color", "red");
					$("#zsname").next().append("<i class='fa fa-times' aria-hidden='true'></i>姓名为空");
				} else {
					$.ajax({
						url: 'http://localhost:16111/user/g_select_idcard',
						type: 'post',
						dataType: 'json',
						data: {
							idcard: $(z).val(),name : $("#zsname").val()
						},
						success: function(data) {
							console.log(data)
							if(data.code == 0) {
								$(z).next().css("color", "lawngreen");
								$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
								$("#zsname").next().empty();
								$("#zsname").next().css("color", "lawngreen");
								$("#zsname").next().append("<i class='fa fa-check' aria-hidden='true'></i>");
							} else if(data.code == 1) {
								$("#zsname").next().empty();
								$("#zsname").next().css("color", "red");
								$("#zsname").next().append("<i class='fa fa-times' aria-hidden='true'></i>请检查和身份证不一致");
							}else{
								$(z).next().css("color", "red");
								$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>检查身份证的合法性");
							}
						}
					});
				}
			}

			//	$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>")
		}
		//昵称查询
		function select_name(z) {
			$(z).next().empty();
			if($(z).val() == "") {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i> 昵称不能为空");
			} else {
				$.ajax({
					url: 'http://localhost:16111/user/g_select_name',
					type: 'post',
					dataType: 'json',
					data: {
						name: $(z).val()
					},
					success: function(data) {
						if(data.code == 1) {
							$(z).next().css("color", "lawngreen");
							$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
						} else {
							$(z).next().css("color", "red");
							$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>名字已被占用");
						}
					}
				});
			}
		}
		//真实姓名校验
		function select_emali(z) {

			$(z).next().empty();

			if($(z).val() == "") {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>姓名为空");
			} else if($("#idcred").val() !== "" && $("#idcred").val().length == 18) {
				select_idcred($("#idcred"));
			} else {
				$(z).next().css("color", "lawngreen");
				$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
			}

		}
		//
		function paswd_qd(z) {
			$(z).next().empty();
			if($(z).val().length < 6) {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>");

			} else {
				$(z).next().empty();
				$(z).next().css("color", "lawngreen");
				$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
			}

		}

		function z(z) {

			var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
			var enoughRegex = new RegExp("(?=.{6,}).*", "g");
             
			if(false == enoughRegex.test(z.value)) {
				$('#level_').removeClass('pw-weak');
				$('#level_').removeClass('pw-medium');
				$('#level_').removeClass('pw-strong');
				$('#level_').addClass('pw-defule');
				//密码小于六位的时候，密码强度图片都为灰色 
			} else if(strongRegex.test(z.value)) {
				$('#level_').removeClass('pw-weak');
				$('#level_').removeClass('pw-medium');
				$('#level_').removeClass('pw-strong');
				$('#level_').addClass('pw-strong');
				//密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
			} else if(mediumRegex.test(z.value)) {
				$('#level_').removeClass('pw-weak');
				$('#level_').removeClass('pw-medium');
				$('#level_').removeClass('pw-strong');
				$('#level_').addClass('pw-medium');
				//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
			} else {
				$('#level_').removeClass('pw-weak');
				$('#level_').removeClass('pw-medium');
				$('#level_').removeClass('pw-strong');
				$('#level_').addClass('pw-weak');
				//如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
			}
			return true;
		}
		//密码强度检验
		function incred_pas(z) {
			$(z).next().empty();
			if($(z).val().length < 6) {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>");
			}else {
				
				var p = /\s+/;
				
				if(p.test($(z).val())){
					$(z).next().css("color", "red");
				    $(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>密码格式不对是否有空格");
				}else{
					$(z).next().css("color", "lawngreen");
				    $(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
				}
				
			}
		}
		// 密码验证
		function pas_jy(z) {
			$(z).next().empty();
			if($(z).val() != $("#paswd").val()) {
				$(z).next().css("color", "red");
				$(z).next().append("<i class='fa fa-times' aria-hidden='true'></i>两次密码不一致");
			} else {
				$(z).next().css("color", "lawngreen");
				$(z).next().append("<i class='fa fa-check' aria-hidden='true'></i>");
			}
		}

	    function create_user() {
			var s = true;
            $("input").each(function (){
                   var vl = $(this).next().html()+"";
             	if(!(vl == "<i class=\"fa fa-check\" aria-hidden=\"true\"></i>")){
             		$(this).css("border-color","red");
             		s = false;
             		return false;
             	};
            });
            if(!s) {
            	return false
            }else{
            	// 提交信息
            	$.ajax({
				url: 'http://localhost:16111/user/g_insert',
				type: 'post',
				dataType: 'json',
				data: $("#data_").serialize(),
				success: function(data) {
					console.log(1);
					if(data.code == 1) {
						location.href = "registeryzok.html";
					} else if(data.code == -1) {
                        code.style.borderColor = "red";
				        $("#code_er").append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>验证码有误")
					}else{
						$("#tel").next().append("<i class=\"fa fa-times\" aria-hidden=\"true\"></i>手机号已被注册可以直接登录");
					}
				}
			});
            	
            };
            return true;
		}
		
	</script>

</html>